<template>
  <section class="header-wrap">

    <header :class="headerFixed ? 'header header-fixed' : 'header'" id="header">
      <section class="header-inner">
        <div class="logo" @click="goHome">
          <img :src="logo"/>
        </div>

        <div class="search" id="search">
          <img class="tel-img" src="../assets/tell121.png"/>
          <input type="text" v-model="keyword" @keyup.enter="search" placeholder="请输入您想要的.." autocomplete="off" class="search-input">
          <button class="search-submit" @click="search"><img src="../assets/search.png"/></button>
        </div>
        <!--<div class="login-register">-->
        <!--<button>登陆/注册</button>-->
        <!--</div>-->
      </section>
    </header>

    <nav class="nav" id="nav">
      <ul class="nav-box">
        <li class="nav-item" @click="navActiveIndex = 'home'" :class="{ 'active' : navActiveIndex == 'home' }">
          <a style="cursor: pointer;"  @click="goHome">首页</a>
        </li>
        <li class="nav-item" v-for="(item, index) in nav" @click="navActiveIndex = item.id" :key="index" :class="{ 'active' : navActiveIndex == item.id }">
          <router-link  :to="{path: '/article/list/'+item.id}">
            {{ item.name }}
          </router-link>
          <ul class="child-nav-item">
            <li v-for="(c, index1) in item.children" :key="'children'+index+index1" @click="toListLink(item.id,c.id)">{{c.name}}</li>
          </ul>
        </li>
        <li class="nav-item" @click="navActiveIndex = 'us'" :class="{ 'active' : navActiveIndex == 'us' }">
          <!--<a  @click="goHome">关于我们</a>-->
          <a href="http://wenao.cqcrjy.net" target="_blank">
            网校培训
          </a>
        </li>
        <li class="nav-item" @click="navActiveIndex = 'about'" :class="{ 'active' : navActiveIndex == 'about' }">
          <!--<a  @click="goHome">关于我们</a>-->
          <router-link  :to="{path: '/about'}">
            关于我们
          </router-link>
        </li>
      </ul>
    </nav>

    <div class="qrcode-panel">
      <div class="qrcode-panel-head">
        <p>更多内容</p>
        <p>请关注官方微信</p>
      </div>
      <div class="qrcode-panel-img">
        <img src="../assets/qrcode.jpg">
      </div>
      <div class="qrcode-panel-foot">
        <p>咨询电话</p>
        <p>023-62312155</p>
      </div>
    </div>

  </section>
</template>

<script>
  import {mapActions} from 'vuex'
  import merge from 'webpack-merge'
  import events from '@/libs/events'

  export default {
    name: "Header",
    data() {
      return {
        // 导航
        nav: [],
        // 导航高亮索引
        navActiveIndex: this.$route.query.categoryId || 'home',
        // 是否固定头部
        headerFixed: false,
        keyword: '',
        logo:''
      }
    },
    created(){
      this.getNavs();
      events.$on('setLogo', logo => {
        this.logo = logo
      })

      events.$on('setNav', id => {
        this.navActiveIndex = id || 'home'
      })
    },
    mounted() {
      // 监听滚动条
      window.addEventListener('scroll', this.handleScroll)
    },
    destroyed() {
      // 移除滚动条
      window.removeEventListener('scroll', this.handleScroll)
    },
    methods: {
      ...mapActions({
        searchArticle: 'article/searchArticle',
        getCategoryList: 'category/getCategoryList',
      }),
      // 处理滚动条
      handleScroll() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        let offsetTop = document.querySelector('#nav').offsetTop;
        this.headerFixed = !!(scrollTop > offsetTop)
      },

      async getNavs(){
        const ret = await this.getCategoryList()
        const parentNav = ret.data.data.filter(item => {
          return item.parent_id == 0
        })

        this.nav = parentNav.map(item => {
          return {
            ...item,
            children: ret.data.data.filter(item1 => {
              return item1.parent_id == item.id
            })
          }
        })
      },

      // 搜索
      async search() {
        if (!this.$route.path.startsWith('/article/list/1')) {
          this.toPathLink('/article/list/1?keyword=' + this.keyword);
        }

        try {
          // 动态改变路由订单状态参数orderStatus
          this.$router.push({
            query: merge(this.$route.query, {'keyword': this.keyword})
          })
          await this.searchArticle({
            keyword: this.keyword
          });
        } catch (e) {
          console.log(e);

        }
      },
      // 回到首页
      goHome() {
        // window.location.href = "/"
        this.$router.push('/')
      },
      // 路由跳转
      toListLink(categoryId,curentCaId) {
        this.$router.push({path:'/article/list/'+categoryId,query: {categoryId:categoryId,curentCaId:curentCaId}});
      },
      // 路由跳转
      toPathLink(path) {
        this.$router.push(path)
      }
    }
  }
</script>

<style lang="scss" scoped>
  $main-width:90%;
  $main-width-4-big-screen: 70%;

  .header-wrap{
  }

  .qrcode-panel{
    position: fixed;
    top: 400px;
    left: 30px;
    height: 380px;
    width: 200px;
    background: #567fe6;
    text-align: center;
    border-radius: 5px;
    z-index: 9999;

    @media (min-width: 1500px) {
      left: 100px;
    }

    & .qrcode-panel-head{
      height: 80px;
      color: #fff;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: bold;
      padding-top: 20px
    }

    & .qrcode-panel-img{
      height: 200px;

      & img{
        width: 90%;
      }
    }

    & .qrcode-panel-foot{
      height: 80px;
      margin-top: 20px;
      line-height: 40px;
      color: #fff;
      font-size: 20px;
    }
  }

  .header {
    height: 300px;
    width: 100%;
    /*background: #fff;*/
  }

  .header-inner {
    box-sizing: content-box;
    width: 90%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: relative;

    @media (min-width: 1500px) {
      width: 70%;
    }
  }

  .header-fixed {
    width: 100%;
    height: 96px;
    position: fixed;
    z-index: 8888;
    background: #80b8f3;
    border-bottom: 1px solid #dcdee2;
    animation: showAnimate 0.36s both;
  }

  @keyframes showAnimate {
    0% {
      opacity: 0;
      top: -128px;
      filter: alpha(opacity=0);
    }
    25% {
      top: -96px;
      opacity: 0.25;
      filter: alpha(opacity=30);
    }

    50% {
      top: -64px;
      opacity: 0.5;
      filter: alpha(opacity=30);
    }
    75% {
      top: -32px;
      opacity: 0.75;
      filter: alpha(opacity=30);
    }
    100% {
      top: 0;
      opacity: 1;
      filter: alpha(opacity=100);
    }
  }

  .logo {
    max-width: 460px;
    height: 100px;
    text-align: left;
    cursor: pointer;
    /*background: url("../assets/logo1.png") 0px 0 no-repeat;*/
    /*background-size: 100% 100%;*/

    & img{
      width: 100%;
    }
  }

  .search {
    text-align: right;
    position: absolute;
    right: 0px;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    /*margin-right: 48px;*/

    & .tel-img{
      width: 240px;
      height: 50px;
      float: left;
      margin-right: 10px;
    }

    & .search-input {
      height: 50px;
      width: 260px;
      float: left;
      box-sizing: border-box;
      padding: 0 16px;
      border: 1px solid #f0f0f0;
    }

    & .search-submit {
      cursor: pointer;
      height: 50px;
      line-height: 46px;
      width: 52px;
      float: left;
      color: #fff;
      border: none;
      background: #567fe6;

      & img{
        width: 18px;
      }

      &:hover {

      }
    }
  }

  .login-register {
    margin-left: 16px;

    & button {
      cursor: pointer;
      width: 112px;
      height: 48px;
      line-height: 46px;
      text-align: center;
      font-size: 16px;
      color: #657180;
      background-color: #fff;
      border: 1px solid #657180;
      transition: background-color 0.2s ease-in-out;

      &:hover {
        color: #fff;
        background-color: #e74f05;
        border-color: #e74f05;
      }
    }
  }

  .nav {
    width: $main-width;
    margin: auto;

    @media (min-width: 1500px) {
      width: $main-width-4-big-screen;
    }
    /*background: #e74f05;*/
    background: url(../assets/bq_scy_jyb_libj_02.jpg) repeat-x;
    margin-bottom: 20px;

    & .nav-box {
      box-sizing: content-box;
      /*width: 90%;*/
      margin: 0 auto;
      display: flex;
      height: 70px;
      align-items: center;

    }

    & .nav-item {
      width: 11.11111%;
      text-align: center;
      line-height: 70px;
      box-sizing: border-box;
      position: relative;
      border-right: 1px solid #84a1f3;
      font-size: 20px;

      & .child-nav-item{
        display: none;
        position: absolute;
        width: 100%;
        z-index: 100;
        cursor: pointer;
        /*background: #e74f05;*/

        & li{
          background: url(../assets/bq_scy_jyb_libj_01.jpg) repeat-x;
          color: #567fe6;
          font-weight: bold;
          border-bottom: 1px solid #84a1f3;
        }

        & li:hover{
          background: url(../assets/bq_scy_jyb_libj_02.jpg) repeat-x;
          color: #fff;
        }
      }

      &:hover .child-nav-item{
        display: block;
      }

      & a {
        display: block;
        color: #fff;
        font-weight: 400;
        text-decoration: none;
        font-weight: bold;
      }

      &:hover {
        /*background: #0085b3;*/
        background: url(../assets/bq_scy_jyb_libj_01.jpg) repeat-x;

        & a{
          color: #567fe6;
        }
      }

      &.active{
        /*background: #0085b3;*/
        background: url(../assets/bq_scy_jyb_libj_01.jpg) repeat-x;

        & a{
          color: #567fe6;
        }
      }
    }
  }

  @media screen and (min-width: 200px) and (max-width: 750px) {
    .nav {
      & .nav-item {
        width: 150px;
      }
    }
  }
</style>
